import React from 'react';
import styles from './index.less';
import NavLink from 'umi/navlink';
import { Breadcrumb } from 'antd';
import { useLocation } from 'dva';
import { useHistory } from 'dva';
const Breadcrum = props => {
  const { pathname } = useLocation();
  const { setOpenKeys, setSelectedKey } = props;
  const breadcrumbNameMap = {
    '/news': ['菜单1'],
    '/news/about': ['菜单1', '测试目录1'],
  };

  const history = useHistory();

  const handleBread = e => {
    // setOpenKeys([e.target.innerText]);
    setSelectedKey([e.target.innerText]);
    switch (e.target.innerText) {
      case '首页':
        history.push('/home');
        break;
      case '测试目录1':
        history.push('/news/about');
        break;
      default:
        break;
    }
  };
  return (
    <div
      className={styles.header}
      onClick={e => {
        handleBread(e);
      }}
    >
      <Breadcrumb className={styles.breadcrumbs}>
        <Breadcrumb.Item className={styles.BreadcrumItem}>首页</Breadcrumb.Item>
        {breadcrumbNameMap[pathname] ? (
          breadcrumbNameMap[pathname].map(item => (
            <Breadcrumb.Item key={item} className={styles.BreadcrumItem}>
              {item}
            </Breadcrumb.Item>
          ))
        ) : (
          <></>
        )}
      </Breadcrumb>
    </div>
  );
};

export default Breadcrum;
